<template>
  <div id="pie"></div>
</template>

<script>
// Echarts图表
import * as echarts from 'echarts'
export default {
  name: 'PieDate',
  mounted() {
    // 饼图
    var pieDom = document.getElementById('pie')
    var pieChart = echarts.init(pieDom)
    var pieoption
    var dataList = []
    //给methods使用
    this.echartInstance = pieChart
    pieoption = {
      title: {
        text: '中国疫情数量统计',
        subtext: '比例图',
        left: 'center'
      },
      tooltip: {
        trigger: 'item',
        //模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。{d}数据会根据value值计算百分比
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      legend: {
        type: 'scroll',
        orient: 'vertical',
        left: 0,
        top: 20,
        bottom: 20
      },
      series: [
        {
          name: '地区',
          type: 'pie',
          top: 40,
          radius: '70%',
          data: dataList, //填空
          //标签
          label: {
            show: true,
            // position: 'inside',
            formatter: '{b}{d}%', //模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。{d}数据会根据value值计算百分比
            // align: 'center',
            // baseline: 'middle',
            fontFamily: '微软雅黑',
            fontSize: 15
            // color: '#fff'
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }

    this.$http.get('/covid/querypie').then((res) => {
      //填空
      console.log(res.data)
      for (let i in res.data) {
        dataList[i] = res.data[i]
      }
      //数据准备完之后set
      pieChart.setOption(pieoption)
    })
    // 窗口大小实现自适应
    window.addEventListener('resize', this.resizeHandle)
  },
  methods: {
    // 绑定监听事件
    resizeHandle() {
      this.echartInstance.resize()
    }
  },
  unmounted() {
    console.log('清理内存pie,防止内存泄漏')
    // 窗口大小实现自适应
    window.removeEventListener('resize', this.resizeHandle)
  }
}
</script>

<style lang="less" scoped>
#pie {
  height: 500px;
}
</style>